<template>
	<comRoot>
		<template #page>
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
			
			<comNavHeight></comNavHeight>
			
			<view class="shop-content-list relative">
				<view class="tabbar-box flex">
					<view class="tabbar-box-item flex relative" v-for="(item, index) in shopTabList" :key="index" @click="tabTypeClick(item.id)">
						<image class="bg" :src="shopTabIndex === item.id ? `${commonConfigs.domainFrontFileLink}/files/images/common/shop-tab-active.png` : `${commonConfigs.domainFrontFileLink}/files/images/common/shop-tab.png`" mode=""> </image>
						<text :class="['relative font-hanserif-bold text flex-all-center', shopTabIndex === item.id ? 'active' : '']">{{ item.product_type_name }}</text>
					</view>
				</view>
				<view class="shop-tip flex flex-align-items-center relative">
					<image src="/static/images/public_imgs/important-note.png" class="shop-tip-icon" mode=""></image>
					<text>所有商品只可发货，商城商品均为流通品非评级卡!</text>
				</view>
				<scroll-view scroll-y :style="{ height: 'calc(100vh - ' + commonNavHeight + ' - 120rpx)' }">
					<view class="flex relative flex-wrap flex-justify-content-between shop-box-list">
						<view class="" v-for="(item, index) in productList" :key="index">
							<comShopCard :item="item" @gooDetailPage="gooDetailPage"></comShopCard>
						</view>
					</view>
				</scroll-view>
			</view>
		</template>
	</comRoot>
</template>

<script>
	import store from '@/store';
	import { getProductTypeListApi, getProductListApi } from '@/setupproject/INTERFACE';

	export default {
		name: 'shopList',
		data() {
			return {
				shopTabIndex: '',
				shopTabList: [],
				productList: []
			};
		},
		watch: {
			shopTabIndex() {
				this.getProductListApi(this.shopTabIndex);
			}
		},
		computed: {
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},
		methods: {
			// 父组件tabbar触发当前子组件事件
			async loadDataGetFun(e) {
				this.getProductTypeListApi();
			},
			async getProductTypeListApi() {
				const { data, code } = await getProductTypeListApi();
				
				if (code !== 200) {
					return;
				}
				
				this.shopTabList = data.product_type_list;
				this.shopTabIndex = data.product_type_list[0].id;
			},
			tabTypeClick(id) {
				this.shopTabIndex = id;
			},
			async getProductListApi(id) {
				const { data, code, msg } = await getProductListApi({
					product_type_id: id
				});
				if (code !== 200) {
					return uni.showToast({
						title: msg,
						icon: 'none'
					});
				}
				this.productList = data.product_list;
			},
			gooDetailPage(id) {
				uni.navigateTo({
					url: `/secondary/shopInfoPage/shopInfoPage?id=${id}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.shop-content-list {
		padding: 0 20rpx;
		.tabbar-box {
			overflow-x: auto;
			margin-bottom: 26rpx;
			height: 80rpx;
			.tabbar-box-item {
				margin-right: 20rpx;
				color: #E1E4E7;
				height: 80rpx;
				width: 164rpx;
				& > .active {
					color: #FFF;
					font-weight: 700;
				}
				.text {
					// font-weight: bold;
					width: 175rpx;
					// height: 56rpx;
					line-height: 28rpx;
					font-size: 28rpx;
					text-align: center;
				}
			}
		}
		// 去除tabbar滚动条
		.tabbar-box::-webkit-scrollbar {
			display: none;
		}
		
		.shop-tip{
			font-size: 20rpx;
			font-weight: bold;
			color: #FFFFFF;
			padding-bottom: 40rpx;
			.shop-tip-icon{
				width: 20rpx;
				height: 20rpx;
				margin-right: 10rpx;
			}
		}

		.shop-box-list {
			padding-bottom: 300rpx;
		}
	}
</style>
